var PY = new ipinyin;

var KEYBOARD = {
	hasInit:false,
	posWidth:700,
	show:function(opt){
		if(!this.hasInit){
			this.initKeyBoard();
			this.hasInit = true;
		}
		if(opt.showListener && typeof(opt.showListener)=='function'){
			this.showListener = opt.showListener;
		}else{
			this.showListener = null;
		}
		if(opt.setValueListener && typeof(opt.setValueListener)=='function'){
			this.setValueListener = opt.setValueListener;
		}else{
			this.setValueListener = null;
		}
		if(opt.keyDoneListener && typeof(opt.keyDoneListener)=='function'){
			this.keyDoneListener = opt.keyDoneListener;
		}else{
			this.keyDoneListener = null;
		}
		this.relateId = opt.id;	
		var relateDivA = document.getElementById(this.relateId);
		this.value = relateDivA.getAttribute('val');
		if(!this.value){this.value = '';}
		
		this.pos = this.value.length;
		
		var keyboardBox = document.getElementById('keyboardBox');
		keyboardBox.style.display = 'block';
		this.keyboardInlineBox.style.display = 'block';
		
		this.setValue();
		document.focus('key-a-26');
		if(this.showListener){
			this.showListener();
		}
		
	},
	chagneEmptyToNBSP:function(val){
		var con = '';
		var arr = val.split(' ');
		if(arr.length > 1){
			con = arr[0];
			for(var i = 1;i<arr.length;i++){
				con +='&nbsp;' + arr[i];
			}
		}else{
			con = val;
		}
		return con;
	},
	setValue:function(){
		var val = this.value;
		var disVal = val.substring(0,this.pos);
		this.keyboardInline.innerHTML = this.chagneEmptyToNBSP(disVal);
		var width = this.keyboardInline.offsetWidth;
		var left = 0;
		if(width > this.posWidth){
			left =this.posWidth - width;
			width = this.posWidth-2;
		}
		this.keyboardTextBox.style.left = left;
		this.keyBoardPosBox.style.left =  width;
		this.keyboardTextBox.innerHTML = this.chagneEmptyToNBSP(val);
	},
	delValue:function(){
		if(this.pos > 0){
			this.value = this.value.substring(0,this.pos- 1)+this.value.substring(this.pos);
			this.pos --;
		}
		this.setValue();
	},
	addValue:function(v){
		this.value = this.value.substring(0,this.pos)+v+this.value.substring(this.pos);
		this.pos+=v.length;
		this.setValue();
	},
	stringToPassword:function(str){return str;},
	initKeyBoard:function(){	
		var keyboardBox = document.getElementById('keyboardBox');
		var aList = keyboardBox.getElementsByTagName('a');
		var a;
		for(var i = 0;i<aList.length;i++){
			a = aList[i];
			a.onfocus = this.focusKey;
			a.onblur = this.blurKey;
			a.onclick = this.clickKey;
		}
		this.typeList = new Array();
		this.typeList.push({tar:'EN',obj:KEYBOARD_EN});
		
		this.typeList.push({tar:'Sym',obj:KEYBOARD_SYM});
		KEYBOARD.type = KEYBOARD_EN;
		this.curTypeId = 1;
		this.keyboardInlineBox = document.getElementById('keyboardInlineBox');
		this.keyboardInline = document.getElementById('keyboardInline');
		this.keyboardTextBox = document.getElementById('keyboardTextBox');
		this.keyBoardPosBox = document.getElementById('keyBoardPosBox');
	},
	focusKey:function(event){
		var a = event.currentTarget;
		var par = a.parentNode;
		var c = par.className;
		par.className = c+'_cur';
		KEY.CURTYPE = 'keyboard';
	},
	blurKey:function(event){
		var a = event.currentTarget;
		var par = a.parentNode;
		var c = par.className;
		var l = c.lastIndexOf('_');
		var nc = c.substring(0,l);
		par.className = nc;
	},
	clickKey:function(event){
		var a = event.currentTarget;
		var tar = a.getAttribute('tar');
		var val = a.getAttribute('val'); 
		if(tar == 'left' || tar=='right'){
			KEYBOARD.posMove(tar);
		}else{
			KEYBOARD.type.keyRecv(a,tar,val);
		}
	},
	posMove:function(tar){
		if(tar == 'left' ){
			if(this.pos > 0){
				this.pos--;
				this.setValue();
			}
		}else{
			if(this.pos < this.value.length){
				this.pos++;
				this.setValue();
			}
		}
	},
	refreshPage:function(list){
		var keyboardBox = document.getElementById('keyboardBox');
		var aList = keyboardBox.getElementsByTagName('a');
		var a;
		for(var i = 0;i<aList.length;i++){
			a = aList[i];
			var tar = a.getAttribute('tar');
			if(tar == 'key'){
				var val = parseInt(a.getAttribute('val'));
				if(list[val] == ' '){
					a.innerHTML2 = '&nbsp;';
				}else{
					a.innerHTML2 = list[val];
				}
			}
		}
	},
	changeKeyType:function(){
		this.curTypeId ++;
		if(this.curTypeId>this.typeList.length){
			this.curTypeId = 1;
		}
		KEYBOARD.type = this.typeList[this.curTypeId - 1].obj;
		KEYBOARD.type.refreshPage();
		var a = document.getElementById('key-item-sym');
		a.innerHTML2 = this.typeList[this.curTypeId - 1].tar;
	},
	keyNumRecv:function(key){
		if(this.type.keyNumRecv){$.log("key:"+key);
			this.type.keyNumRecv(key);
		}
	},
	keyDone:function(){
		KEY.CURTYPE = '';
		if(this.keyDoneListener){
			this.keyDoneListener();
		}else{
			document.focus(this.relateId);
		}
		var a = document.getElementById(this.relateId);
		a.innerHTML = this.value;
		a.setAttribute('val',this.value);
		this.keyboardInlineBox.style.display = 'none';
		var keyboardBox = document.getElementById('keyboardBox');
		keyboardBox.style.display = 'none';
		
	},
}

var KEYBOARD_EN = {
	list:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'q','w','e','r','t','y','u','i','o','p','_',
		'a','s','d','f','g','h','j','k','l','&','@',
		'z','x','c','v','b','n','m','.',':','/','://',
		' '
	],
	shiftList:false,
	capsList:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'Q','W','E','R','T','Y','U','I','O','P','_',
		'A','S','D','F','G','H','J','K','L','&','@',
		'Z','X','C','V','B','N','M','.',':','/','://',
		' '
	],
	capsShow:false,
	keyRecv:function(a,tar,val){
		if(tar=="done"){
			KEYBOARD.keyDone();
		}else if(tar =="shift"){
			if(this.capsShow){
				this.capsShow = false;
				KEYBOARD.refreshPage(this.list);
			}else{
				this.capsShow = true;
				KEYBOARD.refreshPage(this.capsList);
				
			}
		}else if(tar=="caps"){
			if(this.capsShow){
				this.capsShow = false;
				KEYBOARD.refreshPage(this.list);
			}else{
				this.capsShow = true;
				KEYBOARD.refreshPage(this.capsList);
				
			}
		}else if(tar == 'sym'){
			KEYBOARD.changeKeyType();
		}else if(tar == 'del'){
			KEYBOARD.delValue();
		}else if(tar=='key'){
			var v = parseInt(val);
			if(this.capsShow){
				var w = this.capsList[v];
				KEYBOARD.addValue(w);
			}else{
				var w = this.list[v];
				KEYBOARD.addValue(w);
			}
		}
	},
	refreshPage:function(){
		if(this.capsShow){
			KEYBOARD.refreshPage(this.capsList);
		}else{
			KEYBOARD.refreshPage(this.list);
		}
	}
};
var KEYBOARD_SYM = {
	list:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'[','\\','{','#','}','|',':','(',';','"','_',
		')','$','!','$',']','%','&',',','@','/','@',
		'^','+','*','?','&','|','.','://',':','-','://',
		' '
	],
	shiftList:false,
	capsList:false,
	refreshPage:function(){
		KEYBOARD.refreshPage(this.list);
	},
	keyRecv:function(a,tar,val){
		if(tar=="done"){
			KEYBOARD.keyDone();
		}else if(tar == 'sym'){
			KEYBOARD.changeKeyType();
		}else if(tar == 'del'){
			KEYBOARD.delValue();
		}else if(tar=='key'){
			var v = parseInt(val);
			var w = this.list[v];
			KEYBOARD.addValue(w);
		}
	},
};	
var KEYBOARD_PY = {
	py:'',
	dataList:false,
	curPage:1,
	totalPage:0,
	totalNum:0,
	pageSize:10,
	list:[
		'1','2','3','4','5','6','7','8','9','0','-',
		'q','w','e','r','t','y','u','i','o','p','_',
		'a','s','d','f','g','h','j','k','l','&','@',
		'z','x','c','v','b','n','m','.',':','/','://',
		' '
	],
	shiftList:false,
	capsList:false,
	refreshPage:function(){
		this.py = '';
		var keyboardPYLeft = document.getElementById('keyboardPYLeft');
		keyboardPYLeft.innerHTML = '';
		var keyboardPYRight = document.getElementById('keyboardPYRight');
		keyboardPYRight.innerHTML = '';
		this.dataList = false;
		this.curPage = 1;
		this.totalPage = 0;
		this.refreshPyList();
		var keyboardPYBox = document.getElementById('keyboardPYBox');
		keyboardPYBox.style.display = 'block';
		KEYBOARD.refreshPage(this.list);
	},
	refreshPyList:function(){
		this.dataList = PY.getTextByPinyin(this.py);
		this.curPage =1;
		this.totalNum = this.dataList.length;
		if(this.totalNum>0){
			this.totalPage = parseInt( (this.totalNum - 1)/this.pageSize) +1;
		}else{
			this.totalPage = 0;
			this.curPage = 0;
		}
		this.showList(true);
	},
	showList:function(ref){
		var keyboardPYLeft = document.getElementById('keyboardPYLeft');
		var keyboardPYRight = document.getElementById('keyboardPYRight');
		keyboardPYLeft.innerHTML2 = this.py;
		
		var keyboardPYPageUp = document.getElementById('keyboardPYPageUp');
		var keyboardPYPageDown = document.getElementById('keyboardPYPageDown');
		if(this.totalNum ==0){ 
			keyboardPYPageUp.style.display = 'none';
			keyboardPYPageDown.style.display = 'none';
			keyboardPYRight.innerHTML = '';
			return false;
		}
		
		if(this.totalpage <= 1){
			leyboardTopPosLeft.style.display = 'none';
			leyboardTopPosRight.style.display = 'none';
		}else{
			if(this.curPage > 1){
				keyboardPYPageDown.style.display = 'block';
			}else{
				keyboardPYPageDown.style.display = 'none';
			}
			if(this.curPage < this.totalPage){
				keyboardPYPageUp.style.display = 'block';
			}else{
				keyboardPYPageUp.style.display = 'none';
			}
		}
		
		var con = '',j=0;
		var s = (this.curPage -1) *  this.pageSize;
		var e = s+this.pageSize;
		e = e>this.totalNum?this.totalNum:e;
		
		for (var i = s; i < e; i++) {
			con +='<div >'+((i+1)%10)+'.'+this.dataList[i]+'</div>';
		} 
		keyboardPYRight.innerHTML = con;
	},
	
	keyRecv:function(a,tar,val){ $.log(val);
		if(tar=="done"){
			KEYBOARD.keyDone();
		}else if(tar == 'sym'){
			KEYBOARD.changeKeyType();
			var keyboardPYBox = document.getElementById('keyboardPYBox');
			keyboardPYBox.style.display = 'none';
		}else if(tar == 'KEY_SLOW'){$.log(this.curPage +'<'+ this.totalPage);
			if(this.curPage < this.totalPage){
				this.curPage++;
				this.showList(false);
			}
		}else if(tar == 'KEY_FAST'){
			if(this.curPage> 1){
				this.curPage--;
				this.showList(false);
			}
		}else if(tar == 'del'){
			this.delWord();
		}else if(tar =="shift" || tar =="caps"){
			
		}else if(tar=='key'){
			val = parseInt(val);
			if(val<10){			//数字
				this.setNumberValue(parseInt(this.list[val]));
			}else if(val<36){	//字母
				this.py = this.py + this.list[val];
				this.refreshPyList();
			}else{
				var w = this.list[val];
				KEYBOARD.addValue(w);
			}
		}
	},
	keyNumRecv:function(v){
		this.setNumberValue(v);
	},
	setNumberValue:function(val){alert(val);
		var w;
		var s = (this.curPage -1) *  this.pageSize+val;
		var e = this.curPage *  this.pageSize+val;
		
		if(val == 0){
			if(this.dataList.length >= e){
				w = this.dataList[e - 1];
			}else{
				w = 0;
			}
		}else{
			if(this.dataList.length >= s){
				w = this.dataList[s - 1];
			}else{
				w = val;
			}
		}
		
		KEYBOARD.addValue(w);
	},
	delWord:function(){
		if(this.py.length > 0){
			this.py = this.py.substring(0,this.py.length - 1);
			this.refreshPyList();
		}else{
			KEYBOARD.delValue();
		}
	},
};




KEYBOARD.keyRecv=function(key,keyName){
	if(key == 0x11){		//返回
		KEYBOARD.keyDone();
		return false;
	}else if(key < 0xA){		//这里表示数字
		KEYBOARD.keyNumRecv(key);
		return false;
	}else if(key == 0x19){		//删除
		KEYBOARD.delValue();
	}else if(key == 0xC){		//向左
		var id = document.activeElement.id;
		if(id == 'key-item-done'){
			document.focus('key-item-10');return false;
		}else if(id =='key-item-shift'){
			document.focus('key-item-21');return false;
		}else if(id =='key-item-caps'){
			document.focus('key-item-32');return false;
		}else if(id =='key-item-sym'){
			document.focus('key-item-43');return false;
		}else if(id =='key-item-del'){
			document.focus('key-item-done2');return false;
		}else{
			return true;
		}
	}else if(key == 0xD){		//向左
		var id = document.activeElement.id;
		if(id == 'key-item-10'){
			document.focus('key-item-done');return false;
		}else if(id =='key-item-21'){
			document.focus('key-item-shift');return false;
		}else if(id =='key-item-32'){
			document.focus('key-item-caps');return false;
		}else if(id =='key-item-43'){
			document.focus('key-item-sym');return false;
		}else if(id =='key-item-done2'){
			document.focus('key-item-del');return false;
		}else{
			return true;
		}
	}else{
		KEYBOARD.type.keyRecv(null,keyName,key);
	}
	return true;
}
KEY.TYPE['keyboard'] = KEYBOARD.keyRecv;